<template>
    <div>
        <el-container>
            <el-header>
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                <el-form-item label="订单号">
                <el-input v-model="queryForm.orderNumber" placeholder="请输入订单号查找订单"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query(null)">查询</el-button>
                </el-form-item>
            </el-form>
            </el-header>
            <el-main>
                <el-table
    :data="tableData"
    style="width: 90%"
    max-height="250"
    :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
    <el-table-column
      fixed
      prop="orderNumber"
      label="订单号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="totalAmount"
      label="金额总计"
      width="120">
    </el-table-column>
    <el-table-column
      prop="orderStatus"
      label="状态"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="订单操作"
      width="120"
      >
     
      <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                </template>
        
    </el-table-column>
    
    
  </el-table>
            </el-main>
            <el-footer>
                <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.current"
                :page-size="page.size"
                
                :total="page.total">
            </el-pagination>
            </el-footer>
            <el-dialog
        title="修改订单"
        :visible.sync="addDialogVisible"
        width="30%"
        >
            <el-form :model="modifyForm" class="demo-form-inline">
                <el-form-item label="状态">
                    <el-select v-model="modifyForm.orderStatus" placeholder="选择状态s">
                        <el-option label="异常订单" value="EXCEPTION_ORDER"></el-option>
                        
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleModify">确 定</el-button>    
                </el-form-item>
            </el-form>
        </el-dialog>
        </el-container>
    </div>
    
</template>
<script>
    export default {
    data() {
      return {
        queryForm: {
            orderNumber:""
        },
        tableData:[],
        page:{
            current:1,
            total:0,
            pageSize:10
        },
        modifyForm:{
            
            
        },
        addDialogVisible: false,
      }
    },
    methods:{
        handleCurrentChange(current){
                    this.query(current);
                },
                query(current){
                    console.log(this.tableData);
                    //设置默认值
                    current = current?current:1;
                    
                    //(1) get请求传参的格式与post请求很不同
                    this.$axios.get("http://localhost:8082/getOrder",
                    {
                        params: {
                          orderNumber: this.queryForm.orderNumber,
                          current:current,                         
                        }
                    }
                    ).then(
                        response=>{
                            //（2）返回的response,不是result  
                            // response.data才是result
                            console.log(response);
                            let result = response.data;
                            if(result.code!='200'){
                                this.$message(result.message);
                            }else{
                                let pageResult = result.data;
                                this.tableData= pageResult.records;
                                this.page.total=pageResult.total;
                                this.page.current=pageResult.current;
                                this.page.size=pageResult.size;
                            }
                        }
                    ).catch(error=>{
                        console.error(error);
                        this.$message.error('系统出问题了');
                    });
                },
                handleClick(row){
                    console.log(row);
                    this.modifyForm=row;
                    this.addDialogVisible=true;
                },
                handleModify(){
                  this.$axios.put("http://localhost:8082/modifyOrder",this.modifyForm)
                  .then(response=>{//业务异常
                        if(response.data.code!='200'){
                            this.$message.error("退单失败："+response.data.message);
                        }else{
                          this.$message.success("退单成功")
                        }
                    })
                    .catch(error=>{ //通信异常
                        console.error(error);
                    })
                },
                getOrder(){

                }
    },
    mounted(){
                 this.query(null);
                
            }
}
</script>